import React, { useCallback, useEffect, useState } from 'react';
import { Modal, Tree, Select, Tabs, Button, Row, Col, Collapse, message } from 'antd';
import TagsBlock from './components/tagsBlock';
import { history } from 'umi';
import styles from './index.less';
import UserManagement from '@/components/UserManagement';
import { getByScope, ucEmployeeBatchChgOrg } from '@/services/deptControl';
import { formatTreeData } from '@/services/common';

const { TabPane } = Tabs;

const { Panel } = Collapse;

const DeptAuth: React.FC = () => {

  // 弹出框触发
  const [isModalVisible, setIsModalVisible] = useState<boolean>(false);

  // 部门树数据流
  const [departmentTree, setDepartmentTree] = useState([]);

  // 选中用户数据流
  const [functionTags, setFunctionTags] = useState<any[]>([]);

  // 选中部门树数据流
  const [treeData, setTreeData] = useState<any[]>([]);

  // 已选用户的删除方法
  const removeCurrentTagHandle = (val: string) => {
    const newTags = functionTags.filter(
      (item: { id: string }) => item.id !== val,
    );
    setFunctionTags(newTags);
  };

  // 获取部门树方法
  const getDepartmentTreeByRole = async () => {
    // 根据接口获取值
    let res = await getByScope();

    // 写入值
    setDepartmentTree(formatTreeData(res?.data));
  };

  useEffect(() => {
    getDepartmentTreeByRole();
  }, []);

  // 树勾选回调
  const treeCheck = (keys: any) => {
    setTreeData(keys);
  };

  // 部门树组件
  const TreeSelect = <Tree checkable={false} selectable={true} onSelect={treeCheck} treeData={departmentTree} />;

  // 打开人员选择弹出框
  const openModal = useCallback(() => {
    setIsModalVisible(true);
  }, []);

  // 人员选择弹出框确认按钮
  const handleSubmit = useCallback((arr: any[]) => {
    console.log(arr, 'handleSubmit');
    setFunctionTags(arr);
    setIsModalVisible(false);
  }, []);

  // 人员选择弹出框取消按钮
  const handleCancel = useCallback(() => {
    setIsModalVisible(false);
  }, []);

  // 取消事件
  const cancel = () => {
    history.push('/features/dept/staff');
  }

  // 确定事件
  const save = async () => {
    console.log(treeData);
    console.log(functionTags.map(item => item.id));
    const res = await ucEmployeeBatchChgOrg({
      orgId: treeData[0],
      employeeIds: functionTags.map(item => item.id)
    })

    console.log(res);
    if (res?.code === 200) {
      message.success('人员批量调岗成功');
      cancel();
    }
  }

  return (
    <>
      <UserManagement
        isModalVisible={isModalVisible}
        handleSubmit={handleSubmit}
        handleCancel={handleCancel}
        userList={functionTags}
        type={2}
      ></UserManagement>
      <div className={styles.authorizationContainer}>
        <div className={styles.functionContainer}>
          <p>选择用户</p>
          <div className={styles.choiceUser}>
            <TagsBlock
              dataSource={functionTags}
              removeCurrentTag={removeCurrentTagHandle}
            ></TagsBlock>
            <div className={styles.tagsContainer}>
              <Button
                size="small"
                onClick={openModal}
              >
                添加
              </Button>
            </div>
          </div>
        </div>
        <div className={styles.specialContainer}>
          <p>选择调入部门</p>
          <div>
            <Collapse defaultActiveKey={['1']} expandIconPosition="right">
              <Panel header="PSC产品化规范" key="1">
                <div>{TreeSelect}</div>
              </Panel>
            </Collapse>
          </div>
        </div>
        <div className={styles.actionContainer}>
          <Button onClick={cancel}>取消</Button>
          <Button onClick={save}>保存</Button>
        </div>
      </div>
    </>
  );
};

export default DeptAuth;
